<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Scrollbar 滚动条</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.scrollbar-demo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin: 10px;
	text-align: center;
	border-radius: 4px;
	background: var(--el-color-primary-light-9);
	color: var(--el-color-primary);
}
.flex-content {
	display: flex;
}
.scrollbar-demo-item2 {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 50px;
	margin: 10px;
	text-align: center;
	border-radius: 4px;
	background: var(--el-color-primary-light-9);
	color: var(--el-color-danger);
}
.affix-container {
	text-align: center;
	height:600px;
	border-radius: 4px;
	/* background: var(--el-color-primary-light-9); */
}

.slider-demo-block1 {
	display: flex;
	align-items: center;
	padding-right: 12px;
}
.slider-demo-block1 .el-slider {
	margin-top: 0;
	margin-left: 12px;
	flex: 100;
}
.slider-demo-block1 .demonstration {
	font-size: 14px;
	color: var(--el-text-color-secondary);
	line-height: 44px;
	/* flex: 1; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0;
}
.demonstration{
	flex: 12;
	text-align: right;
	padding-right: 12px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。</p>
	<el-scrollbar height="400px">
		<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
	</el-scrollbar>
	
	<el-divider content-position="left">横向滚动</el-divider><!-- =============================================================== -->
	<p class="desc">当元素宽度大于滚动条宽度时，会显示横向滚动条</p>
	<el-scrollbar ref="scrollbar0" always @scroll="scroll0">
		<div ref="inner0" class="flex-content">
			<p v-for="item in 80" :key="item" class="scrollbar-demo-item2">{{ item }}</p>
		</div>
	</el-scrollbar>
	
	<el-divider content-position="left">最大高度</el-divider><!-- =============================================================== -->
	<p class="desc">当元素高度超过最大高度，才会显示滚动条。</p>
	<el-button @click="add">Add Item</el-button>
	<el-button @click="onDelete">Delete Item</el-button>
	<el-scrollbar max-height="400px">
		<p v-for="item in count" :key="item" class="scrollbar-demo-item">{{ item }}</p>
	</el-scrollbar>
	
	<el-divider content-position="left">手动滚动</el-divider><!-- =============================================================== -->
	<p class="desc">通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动</p>
	<el-scrollbar ref="scrollbar" height="400px" always @scroll="scroll">
		<div ref="inner">
			<p v-for="item in 30" :key="item" class="scrollbar-demo-item">{{ item }}</p>
		</div>
	</el-scrollbar>
	<el-slider v-model="value" :max="max" :format-tooltip="formatTooltip" @input="inputSlider"></el-slider>
	
	
	
	<el-affix position="bottom" :offset="30">
		<div class="slider-demo-block1">
			<span class="demonstration">横向滑动：</span>
			<el-slider v-model="value0" :max="max0" :format-tooltip="formatTooltip" @input="inputSlider0"></el-slider>
		</div>
	</el-affix>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			count: 3,
			max0: 8434,
			max: 0,
			value0: 0,
			value: 0,
		}
	},
	mounted() {
		// console.log(this.$refs.inner0.clientWidth)
		// this.max0 = this.$refs.inner0.clientWidth - 380
		this.max = this.$refs.inner.clientHeight - 380
	},
	methods: {
		scroll0({ scrollLeft, scrollTop }) {
			console.log('scrollLeft0', scrollLeft);//查看滚动距离有多大
			// console.log('scrollTop', scrollTop)
			this.value0 = scrollLeft
		},
		inputSlider0(value) {
			this.$refs.scrollbar0.setScrollLeft(value)
		},
		
		add() {
			this.count++
		},
		onDelete() {
			if (this.count > 0) {
				this.count--
			}
		},
		inputSlider(value) {
			this.$refs.scrollbar.setScrollTop(value)
		},
		scroll({ scrollTop }) {
			this.value = scrollTop
		},
		formatTooltip(value) {
			return `${value} px`
		},
	},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>